<!DOCTYPE html>
<html lang="zh-CN" class="h-full scroll-smooth">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>测试平台 · 后台管理</title>

	<!-- 字体：Noto Sans SC -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&display=swap" rel="stylesheet">

	<!-- Tailwind CDN 配置（自定义主色） -->
	<script>
		window.tailwind = window.tailwind || {};
		window.tailwind.config = {
			darkMode: 'class',
			theme: {
				extend: {
					fontFamily: { sans: ['"Noto Sans SC"', 'system-ui', 'sans-serif'] },
					colors: {
						primary: {
							50: '#eef2ff',
							100: '#e0e7ff',
							200: '#c7d2fe',
							300: '#a5b4fc',
							400: '#818cf8',
							500: '#6366f1',
							600: '#4f46e5',
							700: '#4338ca',
							800: '#3730a3',
							900: '#312e81'
						},
						accent: '#10b981'
					},
					boxShadow: {
						soft: '0 8px 24px -8px rgb(0 0 0 / 0.15)'
					},
					transitionTimingFunction: {
						'smooth': 'cubic-bezier(.2,.8,.2,1)'
					}
				}
			}
		};
	</script>
	<script src="https://cdn.tailwindcss.com"></script>

	<!-- Font Awesome -->
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">

	<!-- 基础样式 -->
	<style>
		:root { color-scheme: light dark; }
		/* 滚动条细节（现代简洁） */
		* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.4) transparent; }
		*::-webkit-scrollbar { height: 8px; width: 8px; }
		*::-webkit-scrollbar-thumb { background: rgba(100,116,139,.35); border-radius: 999px; }
		*::-webkit-scrollbar-track { background: transparent; }
	</style>

	<!-- 主题初始化：跟随系统，支持记忆 -->
	<script>
		(function initTheme() {
			const user = localStorage.getItem('theme');
			if (user === 'dark' || (!user && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
				document.documentElement.classList.add('dark');
			} else {
				document.documentElement.classList.remove('dark');
			}
		})();
	</script>
</head>

<body class="h-full bg-slate-50 text-slate-800 dark:bg-slate-900 dark:text-slate-100 antialiased transition-colors duration-300 ease-smooth">
	<!-- 顶部栏 -->
	<header class="fixed inset-x-0 top-0 z-40 bg-white/70 backdrop-blur border-b border-slate-200 dark:bg-slate-900/60 dark:border-slate-800">
		<div class="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8">
			<div class="flex h-14 items-center gap-3">
				<!-- 移动端：侧栏开关 -->
				<button id="btnSidebar" class="md:hidden p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 transition" aria-label="打开侧栏">
					<i class="fa-solid fa-bars text-lg"></i>
				</button>

				<!-- 品牌 -->
				<div class="flex items-center gap-2">
					<div class="h-7 w-7 rounded bg-gradient-to-br from-primary-500 to-indigo-600 grid place-items-center text-white shadow-soft">
						<i class="fa-solid fa-flask-vial text-sm"></i>
					</div>
					<div class="font-extrabold tracking-tight text-slate-900 dark:text-white select-none">测试平台 · 管理中心</div>
				</div>

				<!-- 顶部搜索 -->
				<div class="ml-4 flex-1 hidden md:flex">
					<label class="relative w-full">
						<i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
						<input type="text" placeholder="搜索任务 / 设备 / 用例..." class="w-full pl-10 pr-3 h-10 rounded-xl bg-slate-100/80 dark:bg-slate-800/80 border border-transparent focus:border-primary-300 focus:ring-2 focus:ring-primary-200/70 dark:focus:ring-primary-700/40 outline-none transition" />
					</label>
				</div>

				<!-- 顶部操作 -->
				<div class="ml-auto flex items-center gap-2">
					<button id="themeToggle" class="h-10 w-10 rounded-xl grid place-items-center hover:bg-slate-100 dark:hover:bg-slate-800 transition" aria-label="切换主题">
						<i class="fa-solid fa-circle-half-stroke"></i>
					</button>
					<button class="relative h-10 w-10 rounded-xl grid place-items-center hover:bg-slate-100 dark:hover:bg-slate-800 transition" aria-label="通知">
						<i class="fa-regular fa-bell"></i>
						<span class="absolute -top-0.5 -right-0.5 inline-flex h-4 min-w-[16px] items-center justify-center rounded-full bg-rose-500 text-[10px] text-white px-1">3</span>
					</button>
					<div class="h-9 w-9 rounded-full ring-2 ring-primary-300/60 overflow-hidden">
						<img src="https://i.pravatar.cc/100?img=5" alt="avatar" class="h-full w-full object-cover">
					</div>
				</div>
			</div>
		</div>
	</header>

	<!-- 页面布局 -->
	<div class="flex h-full pt-14">
		<!-- 侧栏 -->
		<aside id="sidebar" class="fixed md:sticky top-14 z-40 h-[calc(100vh-56px)] w-72 -translate-x-full md:translate-x-0 md:flex shrink-0 flex-col border-r border-slate-200 bg-white dark:bg-slate-900 dark:border-slate-800 transition-transform">
			<div class="p-4">
				<div class="text-xs uppercase tracking-wider text-slate-400 mb-2">导航</div>

				<nav class="space-y-1 text-sm">
					<!-- 一级：仪表盘 -->
					<button data-nav="dashboard" class="nav-item active w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800">
						<i class="fa-solid fa-gauge-high w-5 text-primary-600"></i>
						<span>仪表盘</span>
					</button>

					<!-- 一级：任务中心 -->
					<div>
						<button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 group" aria-expanded="false" data-collapse="#menuTask">
							<i class="fa-solid fa-list-check w-5 text-primary-600"></i>
							<span class="flex-1 text-left">任务中心</span>
							<i class="fa-solid fa-angle-down text-slate-400 group-aria-expanded:rotate-180 transition-transform"></i>
						</button>
						<div id="menuTask" class="mt-1 ml-8 space-y-1 hidden">
							<button data-nav="tasks" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-regular fa-rectangle-list w-4"></i>任务列表
							</button>
							<button data-nav="createTask" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-solid fa-plus w-4"></i>创建任务
							</button>
						</div>
					</div>

					<!-- 一级：设备中心 -->
					<div>
						<button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 group" aria-expanded="false" data-collapse="#menuDevice">
							<i class="fa-solid fa-mobile-screen-button w-5 text-primary-600"></i>
							<span class="flex-1 text-left">设备中心</span>
							<i class="fa-solid fa-angle-down text-slate-400 group-aria-expanded:rotate-180 transition-transform"></i>
						</button>
						<div id="menuDevice" class="mt-1 ml-8 space-y-1 hidden">
							<button data-nav="devices" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-regular fa-hard-drive w-4"></i>设备列表
							</button>
							<button data-nav="deviceTest" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-solid fa-vial w-4"></i>设备测试
							</button>
						</div>
					</div>

					<!-- 一级：测试用例 -->
					<div>
						<button class="w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800 group" aria-expanded="false" data-collapse="#menuCase">
							<i class="fa-solid fa-code w-5 text-primary-600"></i>
							<span class="flex-1 text-left">测试用例</span>
							<i class="fa-solid fa-angle-down text-slate-400 group-aria-expanded:rotate-180 transition-transform"></i>
						</button>
						<div id="menuCase" class="mt-1 ml-8 space-y-1 hidden">
							<button data-nav="cases" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-regular fa-file-code w-4"></i>用例列表
							</button>
							<button data-nav="createCase" class="nav-item w-full flex items-center gap-2 px-3 py-2 rounded hover:bg-slate-100 dark:hover:bg-slate-800">
								<i class="fa-solid fa-pen-to-square w-4"></i>创建/更新用例
							</button>
						</div>
					</div>

					<!-- 一级：执行结果 -->
					<button data-nav="reports" class="nav-item w-full flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-primary-50 hover:text-primary-700 dark:hover:bg-slate-800">
						<i class="fa-solid fa-chart-line w-5 text-primary-600"></i>执行结果
					</button>
				</nav>
			</div>
		</aside>

		<!-- 主内容 -->
		<main class="flex-1 min-w-0 md:ml-72">
			<div class="mx-auto max-w-[1400px] px-4 sm:px-6 lg:px-8 py-6 space-y-6">
				<!-- 面包屑与模块切换 -->
				<div class="flex items-center justify-between">
					<nav class="text-sm text-slate-500 dark:text-slate-400">
						<ol class="flex items-center gap-2">
							<li><a class="hover:text-primary-600" href="#">首页</a></li>
							<li>/</li>
							<li id="breadcrumbCurrent" class="text-slate-900 dark:text-slate-200 font-medium">仪表盘</li>
						</ol>
					</nav>
					<div class="flex items-center gap-2">
						<button data-nav="dashboard" class="tab-btn px-3 py-1.5 rounded-lg text-sm font-medium bg-primary-600 text-white shadow-soft hover:shadow-md transition">仪表盘</button>
						<button data-nav="tasks" class="tab-btn px-3 py-1.5 rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800">任务</button>
						<button data-nav="devices" class="tab-btn px-3 py-1.5 rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800">设备</button>
						<button data-nav="cases" class="tab-btn px-3 py-1.5 rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800">用例</button>
						<button data-nav="reports" class="tab-btn px-3 py-1.5 rounded-lg text-sm hover:bg-slate-100 dark:hover:bg-slate-800">报表</button>
					</div>
				</div>

				<!-- 仪表盘 -->
				<section id="view-dashboard" data-title="仪表盘" class="space-y-6">
					<!-- 统计卡片 -->
					<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
						<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-soft hover:shadow-lg transition">
							<div class="flex items-center justify-between">
								<div>
									<div class="text-sm text-slate-500">设备总数</div>
									<div class="text-2xl font-bold mt-1">128</div>
								</div>
								<div class="h-12 w-12 rounded-xl bg-gradient-to-br from-primary-500 to-indigo-600 text-white grid place-items-center">
									<i class="fa-regular fa-hard-drive"></i>
								</div>
							</div>
							<div class="mt-3 text-xs text-emerald-600"><i class="fa-solid fa-arrow-trend-up mr-1"></i> 较上周 +6%</div>
						</div>

						<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-soft hover:shadow-lg transition">
							<div class="flex items-center justify-between">
								<div>
									<div class="text-sm text-slate-500">在线设备</div>
									<div class="text-2xl font-bold mt-1">97</div>
								</div>
								<div class="h-12 w-12 rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 text-white grid place-items-center">
									<i class="fa-solid fa-signal"></i>
								</div>
							</div>
							<div class="mt-3 text-xs text-emerald-600"><i class="fa-solid fa-circle-check mr-1"></i> 正常率 91%</div>
						</div>

						<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-soft hover:shadow-lg transition">
							<div class="flex items-center justify-between">
								<div>
									<div class="text-sm text-slate-500">待执行任务</div>
									<div class="text-2xl font-bold mt-1">23</div>
								</div>
								<div class="h-12 w-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-600 text-white grid place-items-center">
									<i class="fa-solid fa-clock-rotate-left"></i>
								</div>
							</div>
							<div class="mt-3 text-xs text-amber-600"><i class="fa-regular fa-clock mr-1"></i> 平均排队 3m</div>
						</div>

						<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 shadow-soft hover:shadow-lg transition">
							<div class="flex items-center justify-between">
								<div>
									<div class="text-sm text-slate-500">通过率</div>
									<div class="text-2xl font-bold mt-1">86%</div>
								</div>
								<div class="h-12 w-12 rounded-xl bg-gradient-to-br from-rose-500 to-pink-600 text-white grid place-items-center">
									<i class="fa-solid fa-heart-pulse"></i>
								</div>
							</div>
							<div class="mt-3 text-xs text-rose-600"><i class="fa-solid fa-arrow-trend-down mr-1"></i> 较昨日 -1%</div>
						</div>
					</div>

					<!-- 图表面板 -->
					<div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
						<div class="xl:col-span-2 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5">
							<div class="flex items-center justify-between mb-3">
								<div class="font-semibold">近7日执行趋势</div>
								<div class="text-sm text-slate-500">图表占位，接入 ECharts 到 div#chart 即可</div>
							</div>
							<div id="chart" class="h-72 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700 grid place-items-center text-slate-400">
								<i class="fa-solid fa-chart-column text-4xl opacity-40"></i>
							</div>
						</div>

						<div class="rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 p-5 space-y-3">
							<div class="font-semibold">快速操作</div>
							<div class="grid grid-cols-2 gap-3">
								<button class="group px-4 py-3 rounded-xl bg-gradient-to-r from-primary-600 to-indigo-600 text-white shadow-soft hover:shadow-lg transition">
									<i class="fa-solid fa-plus mr-2"></i><span>创建任务</span>
								</button>
								<button class="group px-4 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition">
									<i class="fa-solid fa-mobile mr-2"></i><span>注册设备</span>
								</button>
								<button class="group px-4 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition">
									<i class="fa-solid fa-file-code mr-2"></i><span>导入用例</span>
								</button>
								<button class="group px-4 py-3 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition">
									<i class="fa-solid fa-bolt mr-2"></i><span>执行任务</span>
								</button>
							</div>
						</div>
					</div>
				</section>

				<!-- 任务列表 -->
				<section id="view-tasks" data-title="任务列表" class="space-y-4 hidden">
					<div class="flex flex-wrap items-center justify-between gap-3">
						<div class="text-xl font-bold">任务列表</div>
						<div class="flex items-center gap-2">
							<button class="px-3 py-2 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition text-sm"><i class="fa-solid fa-arrow-rotate-right mr-1"></i>刷新</button>
							<button class="px-3 py-2 rounded-lg bg-primary-600 text-white hover:shadow-lg transition text-sm"><i class="fa-solid fa-plus mr-1"></i>新建</button>
						</div>
					</div>

					<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
						<div class="p-3 border-b border-slate-200 dark:border-slate-800 flex flex-wrap items-center gap-2">
							<label class="relative">
								<i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"></i>
								<input class="h-10 pl-10 pr-3 rounded-lg bg-slate-100 dark:bg-slate-800 outline-none" placeholder="搜索任务…" />
							</label>
							<select class="h-10 rounded-lg bg-slate-100 dark:bg-slate-800 outline-none">
								<option>全部状态</option>
								<option>排队中</option>
								<option>执行中</option>
								<option>已完成</option>
								<option>失败</option>
							</select>
						</div>

						<div class="overflow-x-auto">
							<table class="min-w-full text-sm">
								<thead class="bg-slate-50/70 dark:bg-slate-800/60 text-slate-500 border-b border-slate-200 dark:border-slate-800">
									<tr>
										<th class="px-4 py-3 text-left"><input type="checkbox" class="rounded border-slate-300"></th>
										<th class="px-4 py-3 text-left">任务名称 <i class="fa-solid fa-sort text-xs opacity-60"></i></th>
										<th class="px-4 py-3 text-left">创建人</th>
										<th class="px-4 py-3 text-left">设备</th>
										<th class="px-4 py-3 text-left">进度</th>
										<th class="px-4 py-3 text-left">状态</th>
										<th class="px-4 py-3 text-right">操作</th>
									</tr>
								</thead>
								<tbody class="divide-y divide-slate-200/80 dark:divide-slate-800">
									<!-- row -->
									<tr class="hover:bg-primary-50/40 dark:hover:bg-slate-800/60 transition">
										<td class="px-4 py-3"><input type="checkbox" class="rounded border-slate-300"></td>
										<td class="px-4 py-3 font-medium">登录回归-2024W42</td>
										<td class="px-4 py-3">Mariana</td>
										<td class="px-4 py-3">Android · 24台</td>
										<td class="px-4 py-3">
											<div class="h-2 bg-slate-200/70 dark:bg-slate-700 rounded-full overflow-hidden">
												<div class="h-full w-2/3 bg-gradient-to-r from-primary-500 to-indigo-600"></div>
											</div>
										</td>
										<td class="px-4 py-3">
											<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700"><i class="fa-solid fa-clock"></i> 执行中</span>
										</td>
										<td class="px-4 py-3">
											<div class="flex justify-end gap-2">
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="查看"><i class="fa-regular fa-eye"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="编辑"><i class="fa-regular fa-pen-to-square"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-rose-500/10 text-rose-600 hover:bg-rose-500/20" title="删除"><i class="fa-regular fa-trash-can"></i></button>
											</div>
										</td>
									</tr>
									<tr class="hover:bg-primary-50/40 dark:hover:bg-slate-800/60 transition">
										<td class="px-4 py-3"><input type="checkbox" class="rounded border-slate-300"></td>
										<td class="px-4 py-3 font-medium">支付核心-冒烟集</td>
										<td class="px-4 py-3">Stone</td>
										<td class="px-4 py-3">iOS · 12台</td>
										<td class="px-4 py-3">
											<div class="h-2 bg-slate-200/70 dark:bg-slate-700 rounded-full overflow-hidden">
												<div class="h-full w-3/4 bg-gradient-to-r from-emerald-500 to-teal-600"></div>
											</div>
										</td>
										<td class="px-4 py-3">
											<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-emerald-100 text-emerald-700"><i class="fa-solid fa-circle-check"></i> 已完成</span>
										</td>
										<td class="px-4 py-3">
											<div class="flex justify-end gap-2">
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="查看"><i class="fa-regular fa-eye"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="编辑"><i class="fa-regular fa-pen-to-square"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-rose-500/10 text-rose-600 hover:bg-rose-500/20" title="删除"><i class="fa-regular fa-trash-can"></i></button>
											</div>
										</td>
									</tr>
									<tr class="hover:bg-primary-50/40 dark:hover:bg-slate-800/60 transition">
										<td class="px-4 py-3"><input type="checkbox" class="rounded border-slate-300"></td>
										<td class="px-4 py-3 font-medium">接口回归-夜间</td>
										<td class="px-4 py-3">Echo</td>
										<td class="px-4 py-3">混合 · 36台</td>
										<td class="px-4 py-3">
											<div class="h-2 bg-slate-200/70 dark:bg-slate-700 rounded-full overflow-hidden">
												<div class="h-full w-1/4 bg-gradient-to-r from-rose-500 to-pink-600"></div>
											</div>
										</td>
										<td class="px-4 py-3">
											<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-rose-100 text-rose-700"><i class="fa-solid fa-circle-exclamation"></i> 失败</span>
										</td>
										<td class="px-4 py-3">
											<div class="flex justify-end gap-2">
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="查看"><i class="fa-regular fa-eye"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="编辑"><i class="fa-regular fa-pen-to-square"></i></button>
												<button class="px-2.5 py-1.5 rounded-md bg-rose-500/10 text-rose-600 hover:bg-rose-500/20" title="删除"><i class="fa-regular fa-trash-can"></i></button>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>

						<!-- 分页 -->
						<div class="p-3 flex flex-wrap items-center justify-between gap-2 text-sm">
							<div class="text-slate-500">共 56 项 · 每页 10 条</div>
							<div class="flex items-center gap-1">
								<button class="px-2.5 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa-solid fa-angles-left"></i></button>
								<button class="px-2.5 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa-solid fa-angle-left"></i></button>
								<button class="px-3 h-9 rounded-lg bg-primary-600 text-white">1</button>
								<button class="px-3 h-9 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">2</button>
								<button class="px-3 h-9 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800">3</button>
								<button class="px-2.5 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa-solid fa-angle-right"></i></button>
								<button class="px-2.5 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700"><i class="fa-solid fa-angles-right"></i></button>
							</div>
						</div>
					</div>
				</section>

				<!-- 创建任务表单 -->
				<section id="view-createTask" data-title="创建任务" class="space-y-4 hidden">
					<div class="text-xl font-bold">创建任务</div>
					<form class="space-y-4">
						<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
							<label class="block">
								<span class="text-sm text-slate-600 dark:text-slate-300">任务名称</span>
								<input required placeholder="请输入任务名称" class="mt-1 w-full h-11 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3 focus:border-primary-400 focus:ring-2 focus:ring-primary-200/70 dark:focus:ring-primary-700/40 outline-none transition">
								<p class="mt-1 text-xs text-slate-400">建议包含业务域与时间信息</p>
							</label>

							<label class="block">
								<span class="text-sm text-slate-600 dark:text-slate-300">优先级</span>
								<select class="mt-1 w-full h-11 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3">
									<option>正常</option>
									<option>高</option>
									<option>紧急</option>
								</select>
							</label>

							<label class="block">
								<span class="text-sm text-slate-600 dark:text-slate-300">目标设备</span>
								<select multiple class="mt-1 w-full min-h-[44px] h-11 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3">
									<option>Android · 24台</option>
									<option>iOS · 12台</option>
									<option>混合 · 36台</option>
								</select>
								<p class="mt-1 text-xs text-slate-400">按住 Ctrl/⌘ 可多选</p>
							</label>

							<label class="block">
								<span class="text-sm text-slate-600 dark:text-slate-300">计划时间</span>
								<input type="datetime-local" class="mt-1 w-full h-11 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3">
							</label>

							<label class="block md:col-span-2">
								<span class="text-sm text-slate-600 dark:text-slate-300">脚本仓库地址</span>
								<input type="url" placeholder="https://example.com/repo.git" class="mt-1 w-full h-11 rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3">
								<p class="mt-1 text-xs text-rose-500 hidden" id="repoError"><i class="fa-solid fa-circle-exclamation mr-1"></i> 地址格式不正确</p>
							</label>

							<label class="block md:col-span-2">
								<span class="text-sm text-slate-600 dark:text-slate-300">任务描述</span>
								<textarea rows="4" placeholder="可填写变更说明、影响范围等…" class="mt-1 w-full rounded-xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 px-3 py-2"></textarea>
							</label>
						</div>

						<div class="flex items-center gap-3">
							<button type="button" class="px-5 h-11 rounded-xl bg-gradient-to-r from-primary-600 to-indigo-600 text-white shadow-soft hover:shadow-lg transition"><i class="fa-solid fa-floppy-disk mr-2"></i>保存</button>
							<button type="button" class="px-5 h-11 rounded-xl bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 transition"><i class="fa-solid fa-play mr-2"></i>保存并执行</button>
							<button type="reset" class="px-5 h-11 rounded-xl hover:bg-slate-100 dark:hover:bg-slate-800 transition">重置</button>
						</div>
					</form>
				</section>

				<!-- 设备列表（示例占位） -->
				<section id="view-devices" data-title="设备列表" class="space-y-4 hidden">
					<div class="text-xl font-bold">设备列表</div>
					<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
						<!-- 设备卡 -->
						<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4 hover:shadow-lg transition">
							<div class="flex items-center justify-between">
								<div class="font-medium">Pixel 7 Pro</div>
								<span class="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-emerald-100 text-emerald-700"><i class="fa-solid fa-signal"></i> 在线</span>
							</div>
							<div class="mt-2 text-sm text-slate-500">Android 14 · 256 GB</div>
							<div class="mt-3 flex gap-2">
								<button class="px-3 h-9 rounded-lg bg-slate-100 dark:bg-slate-800 hover:bg-slate-200 dark:hover:bg-slate-700 text-sm">详情</button>
								<button class="px-3 h-9 rounded-lg bg-primary-600 text-white text-sm shadow-soft hover:shadow-lg">远程控制</button>
							</div>
						</div>
						<!-- 更多卡片可复制… -->
					</div>
				</section>

				<!-- 用例列表（示例占位） -->
				<section id="view-cases" data-title="测试用例" class="space-y-4 hidden">
					<div class="text-xl font-bold">测试用例</div>
					<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
						<table class="min-w-full text-sm">
							<thead class="bg-slate-50/70 dark:bg-slate-800/60 text-slate-500 border-b border-slate-200 dark:border-slate-800">
								<tr>
									<th class="px-4 py-3 text-left">用例标识</th>
									<th class="px-4 py-3 text-left">模块</th>
									<th class="px-4 py-3 text-left">维护人</th>
									<th class="px-4 py-3 text-left">更新时间</th>
									<th class="px-4 py-3 text-right">操作</th>
								</tr>
							</thead>
							<tbody class="divide-y divide-slate-200/80 dark:divide-slate-800">
								<tr class="hover:bg-primary-50/40 dark:hover:bg-slate-800/60 transition">
									<td class="px-4 py-3 font-medium">login_success</td>
									<td class="px-4 py-3">账号中心</td>
									<td class="px-4 py-3">Mariana</td>
									<td class="px-4 py-3">2024-10-12 14:05</td>
									<td class="px-4 py-3">
										<div class="flex justify-end gap-2">
											<button class="px-2.5 py-1.5 rounded-md bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700" title="编辑脚本"><i class="fa-solid fa-code"></i></button>
											<button class="px-2.5 py-1.5 rounded-md bg-primary-600/10 text-primary-700 hover:bg-primary-600/20 dark:text-primary-300" title="绑定到任务"><i class="fa-solid fa-link"></i></button>
										</div>
									</td>
								</tr>
								<!-- 更多行… -->
							</tbody>
						</table>
					</div>
				</section>

				<!-- 报表（示例占位） -->
				<section id="view-reports" data-title="执行结果" class="space-y-4 hidden">
					<div class="text-xl font-bold">执行结果</div>
					<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
						<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
							<div class="font-semibold mb-3">近30日通过率</div>
							<div class="h-72 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700 grid place-items-center text-slate-400">
								<i class="fa-solid fa-chart-pie text-4xl opacity-40"></i>
							</div>
						</div>
						<div class="rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
							<div class="font-semibold mb-3">失败原因分布</div>
							<div class="h-72 rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 dark:from-slate-800 dark:to-slate-700 grid place-items-center text-slate-400">
								<i class="fa-solid fa-chart-area text-4xl opacity-40"></i>
							</div>
						</div>
					</div>
				</section>

			</div>
		</main>

		<!-- 移动端遮罩 -->
		<div id="backdrop" class="fixed inset-0 bg-black/30 z-30 md:hidden hidden"></div>
	</div>

	<!-- 交互脚本（模块切换 / 侧栏 / 折叠菜单 / 主题） -->
	<script>
		const $ = (q, root=document) => root.querySelector(q);
		const $$ = (q, root=document) => Array.from(root.querySelectorAll(q));

		// 主题切换
		$('#themeToggle').addEventListener('click', () => {
			const isDark = document.documentElement.classList.toggle('dark');
			localStorage.setItem('theme', isDark ? 'dark' : 'light');
		});

		// 侧栏开合（移动端）
		const sidebar = $('#sidebar');
		const backdrop = $('#backdrop');
		$('#btnSidebar').addEventListener('click', () => {
			sidebar.classList.remove('-translate-x-full');
			backdrop.classList.remove('hidden');
		});
		backdrop.addEventListener('click', () => {
			sidebar.classList.add('-translate-x-full');
			backdrop.classList.add('hidden');
		});

		// 折叠菜单
		$$('[data-collapse]').forEach(btn => {
			btn.addEventListener('click', () => {
				const target = $(btn.getAttribute('data-collapse'));
				const expanded = btn.getAttribute('aria-expanded') === 'true';
				btn.setAttribute('aria-expanded', String(!expanded));
				target.classList.toggle('hidden');
			});
		});

		// 模块切换（侧栏与顶部 tabs 互通）
		const views = {
			dashboard: $('#view-dashboard'),
			tasks: $('#view-tasks'),
			createTask: $('#view-createTask'),
			devices: $('#view-devices'),
			deviceTest: $('#view-devices'), // 示例复用
			cases: $('#view-cases'),
			createCase: $('#view-cases'),  // 示例复用
			reports: $('#view-reports')
		};
		function switchView(name) {
			Object.entries(views).forEach(([k, el]) => el.classList.toggle('hidden', k !== name));
			$('#breadcrumbCurrent').textContent = views[name]?.dataset.title || '…';
			// 顶部 tabs 激活
			$$('.tab-btn').forEach(b => {
				const on = b.dataset.nav === name || (name === 'createTask' && b.dataset.nav === 'tasks');
				b.classList.toggle('bg-primary-600', on);
				b.classList.toggle('text-white', on);
				b.classList.toggle('shadow-soft', on);
			});
			// 侧栏激活
			$$('.nav-item').forEach(b => b.classList.remove('active', 'bg-primary-50', 'text-primary-700'));
			$$(`.nav-item[data-nav="${name}"]`).forEach(b => b.classList.add('active','bg-primary-50','text-primary-700'));
			// 移动端关闭侧栏
			if (window.innerWidth < 768) { sidebar.classList.add('-translate-x-full'); backdrop.classList.add('hidden'); }
		}
		$$('[data-nav]').forEach(b => b.addEventListener('click', () => switchView(b.dataset.nav)));
	</script>
</body>
</html>